<template>
	<div class="u-page" style="padding-bottom: 0 !important;background-color: #fef2f6;">
		<u-navbar :is-back="false" title=" " :border-bottom="false" :background="Navbar.background">
			<view class="slot-wrap">
				<u-tabs :list="Navbar.list" :is-scroll="false" inactive-color="#a2a0a1" active-color="#eb5468" font-size="36" bg-color="#f1d7e0"
						:active-item-style="Navbar.bar" item-width="190" bar-width="180" bar-height="10" :current="current" @change="change"></u-tabs>
			</view>
		</u-navbar>
		<!-- 机会、商品、拍档 -->
		<div>
			<div>
				<div v-if="current==0">
					<div class="search-width u-pt-15 u-pb-10 u-pl-10 u-pr-10 page-top-color">
						<u-search :show-action="false" :clearabled="true" shape="square"
							:placeholder="hotText0" bg-color="#fffdfe" v-model="keyword0" @search="search0"></u-search>
					</div>
					<div style="width: 100%;margin: 0 auto;">
						<u-swiper :list="JobMarketAds" height="365" border-radius="0" @click="clickSwiper0">
						</u-swiper>
					</div>
				</div>
				<div v-if="current==1">
					<div class="search-width u-pt-15 u-pb-10 u-pl-10 u-pr-10 page-top-color">
						<u-search :show-action="false" :clearabled="true" shape="square"
							:placeholder="hotText1" bg-color="#fffdfe" v-model="keyword1" @search="search1"></u-search>
					</div>
					<div style="width: 100%;margin: 0 auto;">
						<u-swiper :list="JobOservicesAds" height="365" border-radius="0" @click="clickSwiper1">
						</u-swiper>
					</div>
				</div>
			</div>

			<div v-if="current==0">
				<div style="font-weight: bold;width: 95%;margin: 0 auto;padding-top: 20rpx;">
					<u-tabs :list="MarketTablist" bg-color="#fef2f6" :show-bar="false" active-color="#34292d" inactive-color="#6b6969"
						  :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="MarketTabCurrent"
						  @change="MarketTabChange"></u-tabs>
				</div>
				<div class="u-pb-10" v-if="MarketingList && MarketingList.length>0">
					<div v-for="(item,index) in MarketingList" :key="index">
						<!-- 专家协作 -->
						<div :class="index==0?'':'u-mt-10'" style="background-color: #fffdfe;width: 95%;margin: 0 auto;border-radius: 10rpx;" v-if="item.taskType=='专家协作'" @click="toDetails(item)">
							<div style="display: flex;align-items: center;padding: 20rpx 30rpx 0rpx 30rpx;">
								<div>
									<u-image width="180rpx" height="180rpx" :src="getFirstImg(item.imageUrl)" border-radius="10"></u-image>
								</div>
								<div class="u-pl-10">
									<div class="expert-task-name">{{ item.taskName?item.taskName:'' }}</div>
									<div class="u-pt-5 scrollX">
										<u-tag :text="titem" mode="plain" size="mini" color="#eb5468" bg-color="#fff3f3" border-color="#fff3f3" v-for="(titem,tindex) in splitStr(item.taskKeyword)" :key="tindex" />
									</div>
									<div class="u-flex u-pt-5">
										<div style="font-size: 40rpx;font-weight: bold;color: #f94d4d;">&yen;{{ item.taskPrice?item.taskPrice:0 }}</div>
										<div class="u-pl-5" style="padding-top: 10rpx;">
											<u-tag text="专家协作报酬" mode="plain" size="mini" color="#5dabfd" border-color="#5dabfd" />
										</div>
									</div>
								</div>
							</div>
							<div style="padding: 20rpx 30rpx;color: #bcbcbc;">
								{{item.createTime}}
							</div>
						</div>
						<div :class="index==0?'':'u-mt-10'" style="background-color: #fffdfe;width: 95%;margin: 0 auto;border-radius: 10rpx;" v-else>
							<div @click="toDetails(item)">
								<div style="padding: 30rpx 30rpx 5rpx 30rpx;width: 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
									<span class="goods-title-tag" v-if="item.taskKeyword && item.taskType != '评测需求'">{{item.taskKeyword}}</span>
									<span class="goods-title-tag2" v-if="item.taskKeyword && item.taskType == '评测需求'">{{item.taskKeyword}}</span>
									<span style="color: #000000;font-size: 34rpx;font-weight: bold;height: 50rpx;line-height: 50rpx;">
										{{item.taskName?item.taskName:''}}
									</span>
								</div>
								<div class="u-flex" style="padding: 5rpx 30rpx;">
									<div style="color: #f94d4d;font-size: 44rpx;font-weight: bold;margin: 0 10rpx 10rpx 0;">&yen;{{item.taskPrice?item.taskPrice:0}}</div>
									<div><u-tag :text="item.taskLabel" mode="plain" size="mini" :color="item.taskColor" :border-color="item.taskColor" /></div>
									<div v-if="item.couponLabel"><u-tag :text="item.couponLabel" mode="plain" size="mini" color="#e66142" bg-color="#faede4" border-color="#faede4" /></div>
								</div>
								<div class="u-flex" style="padding: 0 20rpx;">
									<div style="padding: 0 5rpx;" v-for="(titem,tindex) in item.imageUrl.split(',')" :key="tindex" v-if="tindex<3">
										<u-image width="220rpx" height="220rpx" :src="titem" border-radius="10"></u-image>
									</div>
								</div>
							</div>
							<div style="padding: 20rpx 30rpx;color: #bcbcbc;">
								{{item.createTime}}
							</div>
						</div>
						<!-- 推荐企业 -->
						<div class="u-pt-15" v-if="EnterpriseTopList0 && EnterpriseTopList0.length>0 && index==4">
							  <div class="women-channel-top">
								  <div class="u-title u-fz-17">发现企业</div>
								  <div class="u-flex" @click="toEnterpriseList">
									  <div class="sub-text-color">查看更多</div>
									  <div>
										  <u-icon name="arrow-right" color="#bcbcbc"></u-icon>
									  </div>
								  </div>
							  </div>
							  <div>
								  <swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#eb5468" indicator-color="#f1d7e0" :autoplay="true" style="height: 280rpx;border-radius: 20rpx;">
									<swiper-item v-for="(titem,tindex) in EnterpriseTopList0" :key="tindex">
										<div class="enterprise-li" @click="toEPDetails(titem)">
											<div class="u-pb-15 enterprise-li-item">
												<div class="u-flex-1 u-col-center">
													<div class="u-flex u-col-center u-flex-1">
														<div :class="isEnoughLength(titem.enterpriseName)?'enterprise-name':'enterprise-name2'">
															{{titem.enterpriseName?titem.enterpriseName:''}}
														</div>
														<div class="u-pl-5">
															<u-image v-if="titem.enterpriseTop > 0" width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel1.png"></u-image>
															<u-image v-else width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel2.png"></u-image>
														</div>
													</div>
													<div class="u-flex u-pt-5">
														<div class="u-flex">
															<u-icon name="map" size="30"></u-icon>
															<div class="u-pl-5">
																{{titem.province?titem.province:''}} {{titem.city?titem.city:''}}
															</div>
														</div>
														<div class="u-pl-20 u-flex">
															<u-icon name="calendar" size="30"></u-icon>
															<div class="u-pl-5">成立{{getYearsByCreateTime(titem.establishmentDate)}}</div>
														</div>
													</div>
													<div class="u-pt-5 industry">
														{{titem.industry?titem.industry:''}}
													</div>
												</div>
												<div class="avatar-shadow">
													<u-avatar size="130" mode="square" bg-color="#ffffff" img-mode="scaleToFill" :src="titem.avatar"></u-avatar>
												</div>
											</div>
											<div class="divider-line"></div>
										</div>
									</swiper-item>
								  </swiper>
							  </div>
						</div>
					</div>
				</div>
				<div class="u-border-top" v-else>
					<div class="u-text-center" style="padding-top: 20%;">
						<u-empty text="暂无搜索结果" mode="data"></u-empty>
					</div>
				</div>
			</div>
			<div v-if="current==1">
				<div style="font-weight: bold;width: 95%;margin: 0 auto;padding-top: 20rpx;">
					<u-tabs :list="OSTablist" bg-color="#fef2f6" :show-bar="false" active-color="#444444" inactive-color="#6b6969"
						  :active-item-style="{fontSize:'44rpx'}" height="100" font-size="30" gutter="15" :current="OSTabCurrent"
						  @change="OSTabChange"></u-tabs>
				</div>
				<div v-if="OServicesList && OServicesList.length>0">
					<!-- 需求列表 -->
					<ul>
						<li v-for="(item, index) in OServicesList" :key="index">
							<div :class="index==0?'services-li':'u-mt-10 services-li'" @click="toJobDetails(item)">
								<!-- 标题 -->
								<div class="u-title u-flex u-row-between u-col-center">
									<div class="u-flex u-col-center u-flex-1">
										<div class="hot-tag" v-if="item.jobTop">热</div>
										<div class="new-tag" v-if="!item.jobTop && isNewOS(item)">新</div>
										<div class="os-job-name">
											{{item.jobName?item.jobName:''}}
										</div>
									</div>
									<div class="os-salary" v-if="item.salary">￥{{item.salary}}</div>
								</div>
								<div class="u-pt-5">
									{{item.company?item.company:''}}
								</div>
								<!-- 标签 -->
								<div class="u-scroll-x u-mr-5 u-pt-5" style="display: flex;justify-content: flex-start;">
									<u-tag :text="item.experiece" type="info" mode="dark" size="mini" bg-color="#fff3f3" color="#eb5468"
										v-if="item.experiece"></u-tag>
									<u-tag :text="item.degree" type="info" mode="dark" size="mini" bg-color="#fff3f3" color="#eb5468"
										v-if="item.degree"></u-tag>
									<u-tag :text="item.type + item.requirements" type="info" mode="dark" size="mini"
                         color="#eb5468" bg-color="#fff3f3" v-if="item.type && item.requirements"></u-tag>
									<u-tag :text="item.keyword.split(',')[0]" type="info" mode="dark" size="mini"
                         color="#eb5468" bg-color="#fff3f3" v-if="item.keyword"></u-tag>
									<u-tag :text="item.keyword.split(',')[1]" type="info" mode="dark" size="mini"
                         color="#eb5468" bg-color="#fff3f3" v-if="item.keyword && item.keyword.split(',').length>1"></u-tag>
								</div>
								<div class="u-pt-10" style="display: flex;justify-content: space-between;">
									<div class="u-flex">
										<u-avatar :src="item.avatar=='男'?BoyAvatar:GirlAvatar" size="45"></u-avatar>
										<div class="u-pl-5">{{item.leader?item.leader:''}}</div>
										<div class="u-pl-5">{{item.posts?item.posts:''}}</div>
									</div>
									<div class="u-cl-content u-fz-12">
										{{item.area?item.area:''}}
									</div>
								</div>
							</div>
							<!-- 推荐企业 -->
							<div class="u-pt-15" v-if="EnterpriseTopList && EnterpriseTopList.length>0 && index==4">
								  <div class="women-channel-top">
									  <div class="u-title u-fz-17">发现企业</div>
									  <div class="u-flex" @click="toEnterpriseList">
										  <div class="sub-text-color">查看更多</div>
										  <div>
											  <u-icon name="arrow-right" color="#bcbcbc"></u-icon>
										  </div>
									  </div>
								  </div>
								  <div>
									  <swiper class="swiper" circular :indicator-dots="true" indicator-active-color="#eb5468" indicator-color="#f1d7e0" :autoplay="true" style="height: 280rpx;border-radius: 20rpx;">
										<swiper-item v-for="(titem,tindex) in EnterpriseTopList" :key="tindex">
											<div class="enterprise-li" @click="toEPDetails(titem)">
												<div class="u-pb-15 enterprise-li-item">
													<div class="u-flex-1 u-col-center">
														<div class="u-flex u-col-center u-flex-1">
															<div :class="isEnoughLength(titem.enterpriseName)?'enterprise-name':'enterprise-name2'">
																{{titem.enterpriseName?titem.enterpriseName:''}}
															</div>
															<div :class="isEnoughLength(titem.enterpriseName)?'u-pl-5':''">
																<u-image v-if="titem.enterpriseTop > 0" width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel1.png"></u-image>
																<u-image v-else width="40rpx" height="40rpx" src="https://www-1308272144.cos.ap-guangzhou.myqcloud.com/Meily/img/Enterprise/EnterpriseLevel2.png"></u-image>
															</div>
														</div>
														<div class="u-flex u-pt-5">
															<div class="u-flex">
																<u-icon name="map" size="30"></u-icon>
																<div class="u-pl-5">
																	{{titem.province?titem.province:''}} {{titem.city?titem.city:''}}
																</div>
															</div>
															<div class="u-pl-20 u-flex">
																<u-icon name="calendar" size="30"></u-icon>
																<div class="u-pl-5">成立{{getYearsByCreateTime(titem.establishmentDate)}}</div>
															</div>
														</div>
														<div class="u-pt-5 industry">
															{{titem.industry?titem.industry:''}}
														</div>
													</div>
													<div class="avatar-shadow">
														<u-avatar size="130" mode="square" bg-color="#ffffff" img-mode="scaleToFill" :src="titem.avatar"></u-avatar>
													</div>
												</div>
												<div class="divider-line"></div>
											</div>
										</swiper-item>
									  </swiper>
								  </div>
							</div>
						</li>
					</ul>
				</div>
				<div v-else>
					<div class="u-text-center" style="padding-top: 20%;">
						<u-empty text="暂无搜索结果" mode="data"></u-empty>
					</div>
				</div>
			</div>

			<!-- 为了列表能显示完全 -->
			<!-- <div style="height: 120rpx;"></div> -->

		</div>
		<Notice ref="noticeModule"></Notice>
	</div>
</template>

<script>
	import navbar from "../components/navbar.vue"
	import globalData from "@/globalData";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				JobMarketAds: [],
				JobShopsalesAds: [],
				JobOservicesAds: [],
				posters: [],
				current: 1,
				hotText0: '请输入关键词',
				keyword0: '',
				searchStr0: '',
				pageNum0: 1,
				pageSize0: 10,
				MarketingList: [],
				hotText1: '请输入关键词',
				keyword1: '',
				searchStr1: '',
				pageNum1: 1,
				pageSize1: 10,
				OServicesList: [],
				imgUrl: 'https://dev.openea.net/linkey/bpm/appfile/alibaoTest/dog.jpeg',
				Navbar: {
					list: [
						{
							name: '玫丽任务'
						},
						{
							name: '玫丽直聘'
						}
					],
					bar: {
						color: '#34292d',
						fontSize: '46rpx'
					},
					background: {
						background: '#f1d7e0'
					}
				},
				BoyAvatar: globalData.IMGS.BoyAvatar,
				GirlAvatar: globalData.IMGS.GirlAvatar,
				requirements: '',//玫丽直聘分类切换参数
				OSTabCurrent: 0,
				OSTablist: [
					{name: '为你推荐'},
					{name: '远程'},
					{name: '坐班'},
					{name: '外勤'}
				],
				taskType: '',
				MarketTabCurrent: 0,
				MarketTablist: [
					{name: '为你推荐'},
					{name: '品牌推广'},
					{name: '样品推广'},
					{name: '专家协作'}
				],
				EnterpriseTopList0: [],//玫丽任务推荐企业
				EnterpriseTopList: [],//玫丽直聘推荐企业
			};
		},

		onLoad(options) {
			if (this.isNotNull(options.current)) {
				this.current = options.current
			}
			this.getAds()
			this.getHotText(0, 'market')
			this.getMarketingList()
			this.getServiceHotText()
			this.getOServicesList()
			this.getEnterpriseTopData()
		},

		onShow() {
			this.reloadNotice()
		},

		mounted() {},

		onReady() {

		},

		onPullDownRefresh() {
			if (this.current == 0) {
				this.pageNum0 = 1
				this.getMarketingList()
			} else if (this.current == 1) {
				this.pageNum1 = 1
				this.getOServicesList()
			}
			this.getAds()
			this.getEnterpriseTopData()
			setTimeout(() => {
				// 停止Loading
				uni.stopPullDownRefresh();
			}, 1000)
		},

		onReachBottom() {
			if (this.current == 0) {
				this.pageNum0 += 1
				this.getMarketingList()
			} else if (this.current == 1) {
				this.pageNum1 += 1
				this.getOServicesList()
			}
		},

		methods: {
			change(index) {
				this.current = index;
			},
      toEPDetails(item){
       this.$u.route('pages_tabbar_contact/index_contact/EnterpriseInfo?userId=' + item.userId + '&enterpriseNo=' + item.enterpriseNo)
      },
			/**
			 * 获取广告图
			 */
			async getAds() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/config/list",
					configType: "job"
				});
				if (result.code == 200) {
					this.JobMarketAds = []
					this.JobOservicesAds = []
					let rows = result.rows
					if (rows.length > 0) {
						for (const i in rows) {
							if (rows[i].configKey == 'job-market') {
								let obj = {
									image: rows[i].imageLink.split(",")[0],
									link: rows[i].configLink,
									source: rows[i].configFrom
								}
								this.JobMarketAds.push(obj)
							} else if (rows[i].configKey == 'job-oservices') {
								let obj = {
									image: rows[i].imageLink.split(",")[0],
									link: rows[i].configLink,
									source: rows[i].configFrom
								}
								this.JobOservicesAds.push(obj)
							}
						}
					}
				}
			},

			/**
			 * 点击轮播图跳转
			 */
			clickSwiper0(index) {
				this.routeAD(this.JobMarketAds[index].link, this.JobMarketAds[index].source)
			},
			clickSwiper1(index) {
				this.routeAD(this.JobOservicesAds[index].link, this.JobOservicesAds[index].source)
			},

			/**
			 * 获取市场推广类列表数据
			 */
			async getMarketingList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/hall/list",
					collectType: 'market',
					searchStr: this.searchStr0,
					taskType: this.taskType,
					pageNum: this.pageNum0,
					pageSize: this.pageSize0,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					if (this.pageNum0 != 1) {
						this.MarketingList = this.MarketingList.concat(result.rows)
					} else {
						this.MarketingList = result.rows
					}
				}
			},

			/**
			 * 获取运营服务类列表数据
			 */
			async getOServicesList() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/job/applet/list",
					searchStr: this.searchStr1,
					status: "招聘中",
					pageNum: this.pageNum1,
					pageSize: this.pageSize1,
					requirements: this.requirements,
					loading: true // 默认发起请求会有一个全局的Loading，设置false可去掉
				});
				if (result.code == 200) {
					let jobList = result.rows.map(item => {
						if (this.isNotNull(item.area)){
						item.area = item.area.replace("-"," ")
						}
						return item;
					})
					if (this.pageNum1 != 1) {
						this.OServicesList = this.OServicesList.concat(jobList)
					} else {
						this.OServicesList = jobList
					}
				}
			},

			/**
			 * 获取搜索关键词
			 */
			async getHotText(current, collectType) {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/hall/hot/task",
					collectType: collectType,
					loading: false
				});
				if (result.code == 200) {
					let hotText = '大家都在搜' + result.data
					if (current == 0 && this.isNotNull(result.data)) {
						this.hotText0 = hotText
					}
				}
			},

			/**
			 * 获取运营服务类搜索关键词
			 */
			async getServiceHotText() {
				let result = await this.$u.api.unifyMiniRestGet({
					systemid: "meily",
					url: "/job/get/hot",
					loading: false
				});
				if (result.code == 200) {
					let hotText = '大家都在搜' + result.msg
					this.hotText1 = hotText
				}
			},

			search0() {
				this.pageNum0 = 1
				this.searchStr0 = this.keyword0
				this.getMarketingList()
			},

			search1() {
				this.pageNum1 = 1
				this.searchStr1 = this.keyword1
				this.getOServicesList()
			},

			/**
			 * 路由跳转
			 */
			routePage(item) {
				this.$u.route(item.taskUrl)
			},

			/**
			 * 跳转到工作详情
			 */
			toJobDetails(item) {
				this.$u.route('/pages_tabbar_contact/index_contact/jobDetails?jobId=' + item.jobId)
			},

			/**
			 * 判断招聘是否在一周内（标签显示为新）
			 */
			isNewOS(item) {
				let now = new Date()//获取当前时间戳
				let createTime = new Date(item.createTime.replace(/-/g,"/"))//距离的时间
				let index = (now - createTime)/1000/(60*60*24)
				let day = parseInt(index)//天
				if(day < 8){
					return true
				}
				return false
			},

			/**
			 * 跳转到任务详情
			 */
			toDetails(item) {
				this.$u.route(item.taskUrl)
			},

			/**
			 * 玫丽直聘切换tab
			 */
			OSTabChange(index) {
				if(this.OSTabCurrent !== index){
					this.OSTabCurrent = index
					if(this.OSTabCurrent != 0){
						this.requirements = this.OSTablist[this.OSTabCurrent].name
					}else{
						this.requirements = ''
					}
					this.pageNum1 = 1
					this.getOServicesList()
				}
			},

			/**
			 * 玫丽任务切换tab
			 */
			MarketTabChange(index) {
				if(this.MarketTabCurrent !== index){
					this.MarketTabCurrent = index
					if(this.MarketTabCurrent == 1){
						this.taskType = '评测需求'
					}else if(this.MarketTabCurrent == 2){
						this.taskType = '样品发放'
					}else if(this.MarketTabCurrent == 3){
						this.taskType = '专家协作'
					}else{
						this.taskType = ''
					}
					this.pageNum0 = 1
					this.getMarketingList()
				}
			},

			/**
			 * 获取推荐企业数据
			 */
			async getEnterpriseTopData() {
				let result = await this.$u.api.unifyMiniRest({
					systemid: "meily",
					url: "/enterprise/page/random/list",
					randomQuantity: 10,
					loading: false
				});
				if (result.code == 200) {
					if(result.data && result.data.length>0) {
						this.EnterpriseTopList0 = []
						this.EnterpriseTopList = []
						if(result.data.length>5){
							for(const i in result.data){
								if(i > 4){
									this.EnterpriseTopList0.push(result.data[i])
								}else{
									this.EnterpriseTopList.push(result.data[i])
								}
							}
						}else{
							this.EnterpriseTopList0 = result.data
							this.EnterpriseTopList = result.data
						}
					}
				}
			},

			/**
			 * 根据公司名称的长度计算是否在范围内
			 */
			isEnoughLength(name) {
				return this.$u.test.rangeLength(name, [0, 14])
			},

			//生成一个根据日期参数返回距离今天是多少年，如果不够一年则返回月份数的函数
			getYearsByCreateTime(createTime){
				const date = new Date(createTime)
				const today = new Date()
				const diffInMilliseconds = today - date
				const diffInYears = parseInt(diffInMilliseconds / (1000 * 60 * 60 * 24 * 365))
				const diffInMonths = parseInt((diffInMilliseconds % (1000 * 60 * 60 * 24 * 365)) / (1000 * 60 * 60 * 24 * 30))
				if (diffInYears >= 1) {
					return diffInYears + "年"
				} else {
					return diffInMonths + "个月"
				}
			},

			/**
			 * 跳转到热门企业
			 */
			toEnterpriseList() {
				this.$u.route('pages_tabbar_contact/index_contact/EnterpriseList')
			},

			/**
			 * 将字符串分割成数组
			 */
			splitStr(str) {
				return str.split(',')
			},

		},
	};
</script>

<style scoped>
	/* 尾部导航 */
	.holder {
		width: 100%;
		height: 1.65rem;
	}

	/* .foot-bar{width: 100%;position: fixed;bottom: 0;left: 0;z-index: 99;border-top: .01rem solid #535870;background: linear-gradient(to right,#2c324d,#3f4561);} */
	.foot-bar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;
		background: #FFFFFF;
		padding-bottom: 50rpx
	}

	.foot-bar ul {
		width: 100%;
		display: flex;
		justify-content: space-between;
		font-size: .2rem;
		color: #fff;
		letter-spacing: .03rem;
	}

	.foot-bar ul li {
		width: 100%;
		text-align: center;
		height: 4rem;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.foot-bar ul li i {
		flex-shrink: 0;
		display: inline-block;
		width: 100%;
		height: 2rem;
		margin-top: .08rem;
	}

	.foot-bar ul li span {
		padding-top: 0rem;
		font-size: .7rem;
		color: black;
	}

	.foot-bar ul li.middle {
		flex-shrink: 0;
		width: 3rem;
		height: 3rem;
		border-radius: 100%;
		background: linear-gradient(#fe5e81, #fe4475);
		margin-top: -1.2rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.foot-bar ul li.middle i {
		width: 1.5rem;
		height: 1.5rem;
		background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-middle.png?sign=c9c306222b055798da5d11ea88347f9f&t=1648032925) center center no-repeat;
		background-size: 1.5rem auto;
		margin-top: 0;
	}

	.foot-bar ul li:nth-child(1) i {
		background: url(/static/icons/index.png) center center no-repeat;
		background-size: 1.6rem auto;
	}

	.foot-bar ul li:nth-child(2) i {
		background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/Index/IMyMessageCenter4.png?sign=2e76a73f6c48d678711307d17db7dc8b&t=1648625557) center center no-repeat;
		background-size: 1.3rem auto;
	}

	.foot-bar ul li:nth-child(4) i {
		background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-detail.png?sign=8485251f8c05a5a6b45f151cc455e813&t=1648032973) center center no-repeat;
		background-size: 1.5rem auto;
	}

	.foot-bar ul li:nth-child(5) i {
		background: url(https://7072-prodcloud-0goj9rn820c29ef9-1305572243.tcb.qcloud.la/icon/SceneModule/tap-bar-more.png?sign=2aaafe82d012de453efe2edc9d99b1d3&t=1648032988) center center no-repeat;
		background-size: 1.5rem auto;
	}

	.foot-bar ul li.active span {
		font-weight: bold;
	}

	/* 公告栏 */
	.news-content {
		margin: 20rpx;
		background-color: rgb(246, 246, 248);
		padding-bottom: 40rpx;
		padding-top: 1rpx;
		border-radius: 10rpx;
	}

	.news-content-lists {
		margin: 0 auto;
		padding-left: 30rpx;
	}

	.news-content-lists li {
		margin-top: 40rpx;
		/* float: left; */
		width: 100%;
		height: 14px;
		line-height: 14px;
	}

	.news-content-lists li a {
		display: flex;
	}

	.news-content-lists li a i {
		width: 5%;
		font-style: normal;
		font-size: 14px;
		/* color: #888; */
		white-space: nowrap;
	}

	.news-content-lists li a span {
		width: 90%;
		font-size: 14px;
		color: #555;
		white-space: nowrap;
		-o-text-overflow: ellipsis;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.news-content-lists li a:hover span {
		color: #0af
	}

	.clearfix::after {
		clear: both;
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
	}

	.clearfix {}

	.color-blue {
		color: #3B79FE;
	}

	/* .i-one{font-weight: bold;color: red;}
	.i-two{font-weight: bold;color: #ff9800;}
	.i-three{font-weight: bold;color: #ffc107;} */
	.foot-bar ul li:nth-child(3) i {
		background: url(/static/icons/personal.png) center center no-repeat;
		background-size: 1.3rem auto;
	}

	/* 拍档 */
	.partner-box {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
		position: relative;
		background-color: #ffffff;
	}

	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}

	.aui-list-item {
		width: 47%;
		float: left;
		margin: 0 2% 2% 0;
		background: #fff;
		display: block;
		overflow: hidden;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}

	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}

	/* 两行或多行显示... */
	.line-ellipsis {
		width: 320rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* autoprefixer: off */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
	}

	/* 限制需求列表标题的长度 */
	.job-name {
		width: 350rpx;
		height: 50rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.job-price {
		font-size: 40rpx;
		color: #f02323;
		width: 232rpx;
		height: 50rpx;
		text-align: -webkit-right;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: clip;
		// display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
	}

	.work-task-li {
		padding: 30rpx 20rpx;
	}

	/* 商品列表 */
	.aui-list-box {
		overflow: hidden;
		position: relative;
	}

	.aui-list-item {
		width: 47%;
		float: left;
		margin: 0 0 2% 2%;
		background: #fff;
		display: block;
		overflow: hidden;
		background-color: #ffffff;
		/* border-radius: 20rpx; */
	}

	.aui-list-theme-img {
		height: auto;
		width: 100%;
		position: relative;
	}

	.aui-list-theme-img img {
		width: 100%;
		height: auto;
		display: block;
		border: none;
	}

	.aui-list-theme-message {
		background: #ffffff;
		padding: 10rpx 10rpx;
	}

	.aui-list-theme-title {
		color: #4a4a4a;
		font-size: 32rpx;
		line-height: 38rpx;
		margin-top: 5rpx;
	}

	.aui-list-theme-message p {
		// color: #ff3b52;
		font-size: 24rpx;
		font-weight: bold;
	}

	.aui-list-theme-message span.line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
		text-decoration: line-through;
	}

	.aui-list-theme-message span.none-line-through {
		font-size: 0.7rem;
		color: #919191;
		padding: 0 0.2rem;
	}

	.aui-list-theme-message p i {
		font-style: normal;
		font-size: 0.7rem;
		padding: 0 0.2rem;
		color: #ff3b52;
		float: right;
		width: 25px;
		height: 25px;
	}

	.aui-list-theme-message p em {
		font-style: normal;
		font-size: 0.7rem;
		color: #ff3b52;
		text-decoration: line-through;
		font-weight: normal;
	}

	.price-tag {
		padding: 2rpx;
		color: #f16158;
		border: 2rpx solid #ea4d5e;
		text-align: center;
		font-size: 18rpx;
		line-height: 22rpx;
	}

	.services-li {
		width: 95%;
		margin: 0 auto;
		background-color: #fffdfe;
		padding: 30rpx 20rpx;
		/* margin-top: 20rpx; */
		border-radius: 10rpx;
		/* box-shadow: 2rpx 6rpx 20rpx #efebeb;
		border-bottom: 2rpx solid #efebeb;
		border-right: 2rpx solid #efebeb; */
	}

	.os-job-name {
		font-size: 32rpx;
	}

	.os-salary {
		color: #ea4d5e;
		font-size: 32rpx;
	}

	.hot-tag {
		padding: 0rpx 5rpx;
		background-color: #ffa800;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.new-tag {
		padding: 0rpx 5rpx;
		background-color: #ea4d5e;
		color: #ffffff;
		border-radius: 5rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.workerReward-tag {
		font-size: 20rpx;
		border-radius: 5rpx;
		color: #ea4d5e;
		padding: 2rpx 4rpx;
		border: 1rpx solid #ea4d5e;
	}

	.sold-num {
		color: #b7b7b7;
		font-size: 24rpx;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.goods-title-tag {
		color: #ffffff;
		background-color: #40972f;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 3rpx;
		font-weight: 350;
		padding: 2rpx 10rpx;
		margin-right: 5rpx;
	}
	
	.goods-title-tag2 {
		color: #ffffff;
		background-color: #fa5650;
		border-radius: 6rpx;
		font-size: 26rpx;
		margin-right: 3rpx;
		font-weight: 350;
		padding: 2rpx 10rpx;
		margin-right: 5rpx;
	}

	.page-top-color {
		background-color: #f1d7e0;
	}

	.women-channel-top {
		display: flex;
		justify-content: space-between;
		width: 93%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
	}

	.enterprise-li {
		width: 95%;
		margin: 0 auto;
		height: 280rpx;
		background-color: #fffdfe;
		padding: 30rpx 20rpx;
		/* margin-top: 20rpx; */
		border-radius: 10rpx;
		/* box-shadow: 2rpx 6rpx 20rpx #efebeb;
		border-bottom: 2rpx solid #efebeb;
		border-right: 2rpx solid #efebeb; */
		box-shadow: 5rpx 5rpx 10rpx 5rpx #f3f2f2eb;
	}

	.enterprise-li-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.enterprise-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.enterprise-name2 {
		font-size: 32rpx;
		font-weight: bold;
		width: 400rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}

	.sub-text-color {
		color: #bcbcbc;
	}

	.divider-line {
		width: 70%;
		border-bottom: 2rpx #efeeee  solid;
	}
	
	.avatar-shadow {
		border-radius: 10rpx;
		box-shadow: 0 5rpx 5rpx 0rpx #ebebeb;
	}

	.scrollX {
		width: 450rpx;
		white-space: nowrap;
		overflow-x: auto;
	}

	.expert-task-name {
		font-size: 34rpx;
		font-weight: bold;
		width: 450rpx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
</style>
